<!-- author: xuett -->
<!-- date: 2025-03-14 15:04:32 -->
<!-- description: 左侧对话菜单 -->
<template>
  <div class="menu-box">
    <!-- 新对话 -->
    <div :class="['new-talk', talkExpand ? 'active-talk' : '', isCollapse ? 'collapse-talk' : 'noCollapse-talk']" @click="expandNewTalk">
      <div class="talk-icon">
        <GsvgIcon icon="add"></GsvgIcon>
      </div>
      <!-- 收起/展开 -->
      <div class="talk-title">
        新对话
        <el-icon v-show="!talkExpand"><CaretTop /></el-icon>
        <el-icon v-show="talkExpand"><CaretBottom /></el-icon>
      </div>
    </div>
    <!-- 菜单 -->
    <div v-if="talkExpand" class="menu-list">
      <div class="menu-block" v-for="blockItem in menuData" :key="blockItem.menuId">
        <div :class="['menu-block-title', isCollapse ? 'collapse-block' : 'noCollapse-block']">{{ blockItem.menuName }}</div>
        <div class="menu-block-list" :style="{ padding: isCollapse ? '0 10px' : '0 12px' }">
          <el-tooltip
            :disabled="!isCollapse"
            effect="dark"
            v-for="menuItem in blockItem.children"
            :key="menuItem.menuId"
            :content="menuItem.menuName"
            placement="right"
          >
            <div
              :class="['menu-item', isCollapse ? 'collapse-menu' : 'noCollapse-menu', $route.path == menuItem.url ? 'menu-active' : '']"
              @click="changeMenu(menuItem)"
            >
              <div class="menu-icon">
                <GsvgIcon icon="majorApplyForm"></GsvgIcon>
              </div>
              <div class="menu-title">{{ menuItem.menuName }}</div>
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
    <!-- 分隔线 -->
    <div class="divider"></div>
    <!-- 最近对话 -->
    <div :class="['new-talk', historyExpand ? 'active-talk' : '', isCollapse ? 'collapse-talk' : 'noCollapse-talk']" @click="expandHistoryTalk">
      <div class="talk-icon">
        <GsvgIcon icon="history"></GsvgIcon>
      </div>
      <!-- 收起/展开 -->
      <div class="talk-title">
        最近对话
        <el-icon v-show="!historyExpand"><CaretTop /></el-icon>
        <el-icon v-show="historyExpand"><CaretBottom /></el-icon>
      </div>
    </div>
    <div v-if="historyExpand" class="menu-list">
      <div class="menu-block" v-for="blockItem in historyMenuData" :key="blockItem.menuId">
        <div :class="['menu-block-title', isCollapse ? 'collapse-block' : 'noCollapse-block']">{{ blockItem.menuName }}</div>
        <div class="menu-block-list" :style="{ padding: isCollapse ? '0 10px' : '0 12px' }">
          <el-tooltip
            :disabled="!isCollapse"
            effect="dark"
            v-for="menuItem in blockItem.children"
            :key="menuItem.menuId"
            :content="menuItem.menuName"
            placement="right"
          >
            <div
              :class="['menu-item', isCollapse ? 'collapse-menu' : 'noCollapse-menu', $route.path == menuItem.url ? 'menu-active' : '']"
              @click="changeMenu(menuItem)"
            >
              <div class="menu-icon">
                <GsvgIcon icon="add"></GsvgIcon>
              </div>
              <div class="menu-title">{{ menuItem.menuName }}</div>
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  menuData: {
    type: Array,
    default: () => []
  },
  isCollapse: {
    type: Boolean,
    default: false
  }
});

const $router = useRouter();
const $route = useRoute();

const state = reactive({
  talkExpand: true,
  historyExpand: false,
  historyMenuData: [
    {
      menuName: "临时",
      children: [
        {
          menuId: 16373888627,
          menuName: "创建模板",
          icon: "",
          url: "/createTemplate"
        }
      ]
    }
  ]
});
const { talkExpand, historyExpand, historyMenuData } = toRefs(state);

//收起/展开新对话
const expandNewTalk = () => {
  state.talkExpand = !state.talkExpand;
};

//选择菜单
const changeMenu = (val) => {
  $router.push({ path: val.url, query: { menuId: val.menuId } });
};

//收起/展开最近对话
const expandHistoryTalk = () => {
  state.historyExpand = !state.historyExpand;
};
</script>

<style scoped lang="scss">
.menu-box {
  width: 100%;
  height: calc(100% - 79px);
  user-select: none;
  padding-bottom: 20px;
  overflow-y: auto;
  /* 隐藏滚动条 */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
  /* 隐藏 Chrome、Safari 和 Opera 的滚动条 */
  &::-webkit-scrollbar {
    display: none;
  }
  .new-talk {
    box-sizing: border-box;
    width: calc(100% - 20px);
    height: 40px;
    display: flex;
    align-items: center;
    position: relative;
    color: #000000;
    border-radius: 8px;
    cursor: pointer;
    &:hover {
      background-color: #f1f5ff;
      color: #0057ff;
      .talk-icon {
        color: #0057ff;
      }
    }
    .talk-icon {
      width: 16px;
      height: 16px;
      color: #9ca3b1;
      display: flex;
      align-items: center;
      transition: all 0.6s;
    }
    .talk-title {
      font-family: Alibaba PuHuiTi-Regular;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      white-space: nowrap;
      transition: all 0.6s;
    }
  }
  .active-talk {
    background-color: #f1f5ff;
    color: #0057ff;
    .talk-icon {
      color: #0057ff;
    }
  }
  .collapse-talk {
    padding: 0 12px;
    margin: 0 10px;
    .talk-title {
      width: 0;
    }
  }
  .noCollapse-talk {
    padding: 0 12px 0 16px;
    margin: 0 12px;
    .talk-icon {
      margin-right: 8px;
    }
    .talk-title {
      width: calc(100% - 24px);
    }
  }

  .menu-list {
    width: 100%;
    .menu-block {
      width: 100%;
      padding-top: 16px;
      .menu-block-title {
        width: 100%;
        height: 40px;
        font-family: Alibaba PuHuiTi-Regular;
        font-size: 14px;
        color: rgba($color: #000000, $alpha: 0.3);
        line-height: 40px;
        transition: all 0.6s;
      }
      .collapse-block {
        text-align: center;
      }
      .noCollapse-block {
        padding-left: 16px;
      }
      .menu-block-list {
        .menu-item {
          width: 100%;
          height: 40px;
          border-radius: 6px;
          display: flex;
          align-items: center;
          transition: all 0.6s;
          margin-bottom: 4px;
          cursor: pointer;
          &:hover {
            background-color: #f1f5ff;
            .menu-icon {
              color: #0057ff;
            }
            .menu-title {
              color: #0057ff;
            }
          }
          &:last-child {
            margin-bottom: 0;
          }
          .menu-icon {
            width: 16px;
            height: 16px;
            color: #9ca3b1;
            display: flex;
            align-items: center;
            transition: all 0.6s;
          }
          .menu-title {
            font-family: Alibaba PuHuiTi-Regular;
            font-size: 14px;
            color: #000000;
            white-space: nowrap;
            overflow: hidden;
            transition: all 0.6s;
          }
        }

        .menu-active {
          background-color: #f1f5ff;
          .menu-icon {
            color: #0057ff;
          }
          .menu-title {
            color: #0057ff;
          }
        }
        .collapse-menu {
          padding: 0 12px;
          .menu-title {
            width: 0;
          }
        }
        .noCollapse-menu {
          padding: 0 12px 0 16px;
          .menu-title {
            width: calc(100% - 24px);
            margin-left: 8px;
          }
        }
      }
    }
  }
  .divider {
    width: calc(100% - 24px);
    height: 2px;
    background-color: #e5e5e5;
    margin: 12px auto;
  }
}
</style>
